<div id="ChatUserId" style="display: none">{!!$chatUser!!}</div>
<div class="col-lg-9 offset-lg-1 router-view">
    <div class="chat-container">
        <div class="chat-box">
            <div class="left">
                <div class="title">近期消息</div>
                <div id="list" class="list">
                    <div class="list-item">
                        <div class="avatar-container">
                            <div class="avatar" title="加加"
                                 style="background-image: url('https://tvax3.sinaimg.cn/crop.0.0.996.996.180/006BOJXyly8gfm28qcul9j30ro0rowgt.jpg');"></div>
                        </div>
                        <div class="name-container">
                            <div class="name">加加</div>
                            <div class="last-message">嘿！猜猜我是谁？…是列克星敦还是萨拉托加呢？…哎，怎么总是被你猜中呢？明明眼睛捂住了，应该看不到项圈的……</div>
                        </div>
                        <div class="close">
                            <svg data-v-42a3b689="" viewBox="0 0 40 40" class="css-1dtzbno">
                                <path d="M22.83,20,38.42,4.41a2,2,0,1,0-2.83-2.83h0L20,17.17,4.41,1.58A2,2,0,0,0,1.58,4.41L17.17,20,1.58,35.59a2,2,0,0,0,2.83,2.83L20,22.83,35.59,38.42a2,2,0,1,0,2.83-2.83Z"></path>
                            </svg>
                        </div>
                        <div class="red-dot-notify"></div>
                    </div>
                    <div class="list-item active">
                        <div class="avatar-container">
                            <div class="avatar" title="太太"
                                 style="background-image: url('https://tvax4.sinaimg.cn/crop.0.0.1024.1024.180/005O3KBSly8g67nb5741vj30sg0sg7b3.jpg')"></div>
                        </div>
                        <div class="name-container">
                            <div class="name">太太</div>
                            <div class="last-message">今晚想吃什么？无论是什么样的菜色，我都有信心做好哦~！</div>
                        </div>
                        <div class="close">
                            <svg data-v-42a3b689="" viewBox="0 0 40 40" class="css-1dtzbno">
                                <path d="M22.83,20,38.42,4.41a2,2,0,1,0-2.83-2.83h0L20,17.17,4.41,1.58A2,2,0,0,0,1.58,4.41L17.17,20,1.58,35.59a2,2,0,0,0,2.83,2.83L20,22.83,35.59,38.42a2,2,0,1,0,2.83-2.83Z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="dialog">
                    <div class="title">太太</div>
                    <div id="messages-list" class="messages-list">
                        <div class="msg-more">
                            <span class="load-more" style="display: none;">
                                <span class="icon"></span>查看和他的历史私信消息</span>
                            <span class="no-more" style="">没有更多消息了～</span>
                            <span class="loading" style="display: none;">
                                <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></span>
                            <span class="error" style="display: none;">消息加载失败，<span class="btn">点击重新加载</span>
                            </span>
                            <div class="msg-item is-me">
                                <a href="" target="_blank" class="avatar" title="'+data.nickname+'" style="background-image:url(https://tva3.sinaimg.cn/crop.0.0.996.996.180/005yEjIXjw8fa0z5rp8vij30ro0ro75z.jpg);"></a>
                                <div class="message">
                                    <div id="is-me" class="message-content is-me not-img">data.content</div>
                                </div>
                                <i class="fa fa-exclamation resend" title="重新发送" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                    <div class="send-box">
                        <div class="tool-container">
                            <div class="upload-container">
                                <label class="image-upload-btn"></label>
                            </div>
                            <div class="emoji-container">
                                <label class="emotion-btn-box"></label>
                            </div>
                        </div>
                        <div class="editor-container">
                            <div id="editor" class="editor" contenteditable="true">&zwj;</div>
                        </div>
                        <div class="send-button-container">
                            <button class="btn-box send-btn" title="enter 发送 shift + enter 换行">发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="javascript">
    var list = '{!! $list !!}';
    var messageList = '{!! $messageList !!}';
</script>